<template>
  <div class="a_body">
    <img
      v-for="(item, index) in list"
      :key="index"
      :src="item.status == 1 ? treePath : treeOverPath"
      alt=""
      :style="{ left: item.x + 'px', top: item.y + 'px' }"
      @click="imgClick(item)"
    />
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      treePath: require("@/assets/image/tree.png"),
      treeOverPath: require("@/assets/image/tree_over.png"),
      list: [
        { name: "A-油松-001", x: 557, y: 415, status: 1, number: "A-YS-001" },
        { name: "A-油松-002", x: 557, y: 403, status: 1, number: "A-YS-002" },
        { name: "A-油松-003", x: 546, y: 415, status: 1, number: "A-YS-003" },
        { name: "A-油松-004", x: 538, y: 407, status: 1, number: "A-YS-004" },
        { name: "A-油松-005", x: 538, y: 399, status: 1, number: "A-YS-005" },
        { name: "A-油松-006", x: 538, y: 415, status: 1, number: "A-YS-006" },
        { name: "A-樱花-007", x: 495, y: 410, status: 1, number: "A-YH-007" },
        { name: "A-樱花-008", x: 485, y: 410, status: 1, number: "A-YH-008" },
        { name: "A-樱花-009", x: 475, y: 410, status: 1, number: "A-YH-009" },
        { name: "A-樱花-010", x: 465, y: 410, status: 1, number: "A-YH-010" },
        { name: "A-樱花-011", x: 435, y: 410, status: 1, number: "A-YH-011" },
        { name: "A-柿子-013", x: 400, y: 410, status: 1, number: "A-SZ-013" },
        { name: "A-柿子-017", x: 400, y: 400, status: 1, number: "A-SZ-017" },
        { name: "A-白皮枫-018", x: 410, y: 400, status: 1, number: "A-BP-018" },
        { name: "A-白皮枫-019", x: 420, y: 400, status: 1, number: "A-BP-019" },
        { name: "A-白皮枫-020", x: 430, y: 400, status: 1, number: "A-BP-020" },
        { name: "A-银杏-021", x: 440, y: 400, status: 1, number: "A-YX-021" },
        { name: "A-白皮枫-022", x: 450, y: 400, status: 1, number: "A-BP-022" },
        { name: "A-白皮枫-023", x: 460, y: 400, status: 1, number: "A-BP-023" },
        { name: "A-白皮枫-024", x: 470, y: 400, status: 1, number: "A-BP-024" },
        { name: "A-油松-032", x: 559, y: 346, status: 1, number: "A-YS-032" },
        { name: "A-油松-034", x: 549, y: 346, status: 1, number: "A-YS-034" },
        { name: "A-桧柏-036", x: 559, y: 326, status: 1, number: "A-GB-036" },
        { name: "A-桧柏-037", x: 549, y: 336, status: 1, number: "A-GB-037" },
        { name: "A-桧柏-038", x: 529, y: 336, status: 1, number: "A-GB-038" },
        { name: "A-桧柏-039", x: 529, y: 346, status: 1, number: "A-GB-039" },
        { name: "A-桧柏-040", x: 529, y: 356, status: 1, number: "A-GB-040" },
        { name: "A-桧柏-041", x: 529, y: 366, status: 1, number: "A-GB-041" },
        { name: "A-桧柏-042", x: 529, y: 376, status: 1, number: "A-GB-042" },
        { name: "A-白皮枫-044", x: 529, y: 386, status: 1, number: "A-BP-044" },
        { name: "A-桧柏-045", x: 529, y: 396, status: 1, number: "A-GB-045" },
        { name: "A-龙爪槐-109", x: 491, y: 353, status: 1, number: "A-LZ-109" },
        { name: "A-银杏-050", x: 491, y: 373, status: 1, number: "A-YX-050" },
        { name: "A-白皮枫-051", x: 481, y: 373, status: 1, number: "A-BP-051" },
        { name: "A-悬铃木-052", x: 471, y: 383, status: 1, number: "A-XL-052" },
        { name: "A-白皮枫-053", x: 461, y: 373, status: 1, number: "A-BP-053" },
        { name: "A-银杏-054", x: 451, y: 373, status: 1, number: "A-YX-054" },
        { name: "A-SC-055", x: 441, y: 373, status: 1, number: "A-SC-055" },
        { name: "A-桧柏-056", x: 431, y: 373, status: 1, number: "A-GB-056" },
        { name: "A-桧柏-057", x: 435, y: 363, status: 1, number: "A-GB-057" },
        { name: "A-桧柏-058", x: 430, y: 358, status: 1, number: "A-GB-058" },
        { name: "A-碧桃-061", x: 384, y: 400, status: 1, number: "A-SZ-061" },
        { name: "A-碧桃-062", x: 384, y: 380, status: 1, number: "A-SZ-062" },
        { name: "A-碧桃-063", x: 384, y: 360, status: 1, number: "A-SZ-063" },
        { name: "A-碧桃-064", x: 384, y: 340, status: 1, number: "A-SZ-064" },
        { name: "A-碧桃-065", x: 384, y: 330, status: 1, number: "A-SZ-065" },
        //{ name: "A-油松-066", x: 394, y: 330, status: 1, number: "A-YS-066" },
        { name: "A-碧桃-067", x: 384, y: 310, status: 1, number: "A-SZ-067" },
        { name: "A-白蜡-068", x: 384, y: 300, status: 1, number: "A-BL-068" },
        { name: "A-五角枫-070", x: 404, y: 300, status: 1, number: "A-WJ-070" },
        { name: "'A-白蜡-072", x: 424, y: 300, status: 1, number: "A-BL-072" },
        { name: "A-雪松-073", x: 419, y: 334, status: 1, number: "A-XS-073" },
        //{ name: "A-雪松-074", x: 434, y: 340, status: 1, number: "A-XS-074" },
        { name: "A-雪松-075", x: 434, y: 326, status: 1, number: "A-XS-075" },
        { name: "A-国槐-079", x: 470, y: 300, status: 1, number: "A-GH-079" },
        { name: "A-国槐-080", x: 480, y: 300, status: 1, number: "A-GH-080" },
        { name: "A-雪松-082", x: 470, y: 336, status: 1, number: "A-XS-082" },
        { name: "A-白皮枫-083", x: 480, y: 336, status: 1, number: "A-BP-083" },
        { name: "A-油松-084", x: 480, y: 310, status: 1, number: "A-YS-084" },
        { name: "A-国槐-086", x: 490, y: 300, status: 1, number: "A-GH-086" },
        { name: "A-桧柏-090", x: 490, y: 310, status: 1, number: "A-GB-090" },
        { name: "A-油松-095", x: 520, y: 300, status: 1, number: "A-YS-095" },
        { name: "A-油松-096", x: 525, y: 305, status: 1, number: "A-YS-096" },
        { name: "A-白蜡-097", x: 510, y: 300, status: 1, number: "A-BL-097" },
        { name: "A-油松-098", x: 530, y: 300, status: 1, number: "A-YS-098" },
        { name: "A-白蜡-102", x: 560, y: 300, status: 1, number: "A-BL-102" },
        { name: "A-五角枫-105", x: 540, y: 310, status: 1, number: "A-WJ-105" },
      ],
    };
  },
  props: ["documentHeight", "listData"],
  computed: {},
  watch: {
    listData: {
      handler(newV) {
        newV.map((x) => {
          this.list.map((j, i) => {
            if (x.number == j.number) {
              j = { ...j, ...x };
              this.$set(this.list, i, j);
            }
          });
        });

      },
      deep: true,
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const ratio = (this.documentHeight * 4) / 812;
      const xOffset = -40;
      const yOffset = -40;
      this.list.map((item) => {
        item.x = item.x * ratio + xOffset * ratio;
        item.y = item.y * ratio + yOffset * ratio;
      });
    },
    imgClick(item) {
      this.poi = item;
      this.$emit("imgClick", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.a_body {
  img {
    position: absolute;
    top: 70px;
    width: 20px;
    height: 20px;
  }
}
</style>
